<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="960px"
  >
    <el-form
      label-position="right"
      label-width="110px"
      :model="form"
      :rules="rules"
      ref="btnFrom"
    >
      <el-form-item
        label="平台"
        prop="platformName"
      >
        <el-select
          v-model="form.platformName"
          placeholder="请选择平台"
          @change="selectPlatform"
        >
          <el-option
            v-for="item in platformOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="上级菜单"
        prop="menuId"
      >
        <el-select
          v-model="form.menuId"
          placeholder="请选择上级菜单"
          @change="selectMenu"
        >
          <el-option
            v-for="item in menuInfo"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- pc功能 -->
    <PcBtnContent
      ref="pcBtnContent"
      v-if="pcBtnVisible"
      :btnInfo="btnInfo"
      :type="btnType"
      :superiorMenuData="superiorMenuData"
      @closeFn="cancelFn"
    />

    <!-- app功能 -->
    <AppBtnContent
      ref="appBtnContent"
      v-if="appBtnVisible"
      :btnInfo="btnInfo"
      :type="btnType"
      :superiorMenuData="superiorMenuData"
      @closeFn="cancelFn"
    />

    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="cancelFn('btnFrom')">取 消</el-button>
      <el-button
        type="primary"
        @click="sureFn('btnFrom')"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import PcBtnContent from './PcBtnContent.vue';
import AppBtnContent from './AppBtnContent.vue';

export default {
  name: 'BtnDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    btnInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    btnType: {
      type: Number,
      required: true
    }
  },
  components: {
    PcBtnContent,
    AppBtnContent
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set() {
        this.$emit('update:visible', false);
      }
    }
  },
  data() {
    return {
      pcBtnVisible: false,
      appBtnVisible: false,
      form: {
        platformName: '',
        menuId: ''
      },
      rules: {
        platformName: [
          {
            required: true,
            message: '请选择平台',
            trigger: 'change'
          }
        ],
        menuId: [
          {
            required: true,
            message: '请选择上级菜单',
            trigger: 'change'
          }
        ]
      },
      // platformName: '',
      platformOptions: [
        {
          id: 1,
          name: 'PC'
        },
        {
          id: 2,
          name: 'APP'
        }
      ],
      // menuId: '',
      menuInfo: [],
      pcBtnInfo: {},
      superiorMenuData: {}
    };
  },
  created() {
    let type = this.$store.getters.menuType.toUpperCase();
    this.handleMenuData(type);
  },
  methods: {
    // 选中平台
    selectPlatform() {
      this.handleMenuData(this.form.platformName, 1);
    },
    // 处理上级菜单数据
    handleMenuData(type, select) {
      if (type === 'PC') {
        this.form.platformName = 'PC';
        this.menuInfo = this.$store.getters.pcPower.filter(item => {
          return !item.hidden;
        });
        if (select) {
          this.form.menuId = '';
        } else {
          this.form.menuId = this.$store.getters.storePcMenuId;
        }
        this.pcBtnVisible = true;
        this.appBtnVisible = false;
      } else {
        this.form.platformName = 'APP';
        this.menuInfo = this.$store.getters.appPower;
        if (select) {
          this.form.menuId = '';
        } else {
          this.form.menuId = this.$store.getters.storeAppMenuId;
        }
        this.appBtnVisible = true;
        this.pcBtnVisible = false;
      }
      this.selectMenu();
    },
    // 选择上级菜单
    selectMenu() {
      let filterData = this.menuInfo.filter(item => {
        return item.id === this.form.menuId;
      });
      if (filterData && filterData.length) {
        this.superiorMenuData = filterData[0];
      }
    },
    // 取消
    cancelFn() {
      this.$emit('update:visible', false);
    },
    // 确认
    sureFn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitFn();
        } else {
          return false;
        }
      });
    },
    // 提交
    submitFn() {
      if (this.form.platformName === 'PC') {
        this.$refs.pcBtnContent.sureFn('pcBtnFrom');
      } else {
        this.$refs.appBtnContent.sureFn('appBtnFrom');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  .el-select {
    width: 100%;
  }
}
</style>
